<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "course-detail-base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
    {% if nav_tab == "learn" or nav_tab == "" %}
        章节
    {% endif %}
    {% if nav_tab == "comment" %}
        评论
    {% endif %}
    {% if nav_tab == "resources" %}
        资源下载
    {% endif %}
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content_course %}
    {# 章节信息 #}
    {% if nav_tab == "learn" %}
        <div class="column is-full">
            <div class="box">
                <div class="box columns is-horizontal has-background-primary">
                    <div class="column">
                        <span class="title is-3 has-text-white">章节</span>
                    </div>
                </div>

                <div class="box columns is-multiline">
                    {% if course.notice %}
                        <div class="box column has-background-info is-full">
                            <span class="title is-4 has-text-white">课程公告：{{ course.notice }}</span>
                        </div>
                    {% endif %}
                    {% for lesson in course.lesson_set.all %}
                        <div class="box column has-background-primary is-full">
                            <span class="title is-4 has-text-white">{{ lesson.name }}</span>
                            {% for video in lesson.video_set.all %}
                                <div class="box column has-background-primary-dark">
                                <span class="title is-5">
                                    <a class="has-text-link-light"
                                       href="{% url 'course:video' course.id video.id %}">{{ video.name }}（{{ video.learn_times }}&nbsp;分钟）</a>
                                </span>
                                </div>
                            {% endfor %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    {% endif %}
    {% if nav_tab == "comment" %}
        <div class="column is-full">
            <div class="box columns has-background-primary is-multiline">
                <div class="column is-full">
                <textarea class="textarea" maxlength="300" id="comment_textarea"
                          placeholder="留下你对这门课程的想法吧ヾ(≧O≦)〃"></textarea>
                </div>
                <div class="column is-2 is-offset-10">
                    <button class="button is-rounded is-medium is-primary is-fullwidth"
                            type="submit" id="comment_submit">
                        <strong>
                            评&nbsp;&nbsp;&nbsp;&nbsp;论&nbsp;&nbsp;
                            <i class="fa fa-commenting-o" aria-hidden="true"></i>
                        </strong>
                    </button>
                </div>
            </div>
            <br>
            <br>
            <div class="box columns is-multiline">
                {% for comment in comments %}
                    <div class="column is-full box">
                        <article class="media">
                            <figure class="media-left">
                                <p class="image is-64x64">
                                    <img class="is-rounded" src="{{ MEDIA_URL }}{{ comment.user.avatar }}">
                                </p>
                            </figure>
                            <div class="media-content">
                                <div class="content">
                                    <p>
                                        <strong>{{ comment.user.username }}</strong>
                                        <br>
                                    </p>
                                    <hr>
                                    <div class="box">
                                        <strong>{{ comment.comments }}</strong>
                                    </div>
                                    <p>
                                        <small>时间：{{ comment.add_time }}</small>
                                    </p>
                                </div>
                            </div>
                        </article>
                    </div>
                {% endfor %}

            </div>
        </div>
    {% endif %}
    {# 资源下载 #}
    {% if nav_tab == "resources" %}
        <div class="column is-full">
            <div class="box">
                <div class="box columns is-horizontal has-background-primary">
                    <div class="column">
                        <span class="title is-3 has-text-white">课程资源</span>
                    </div>
                </div>

                <div class="box columns is-multiline">
                    {% for resources in course_resources %}
                        <div class="box column has-background-primary is-full">
                                <span class="title is-5">
                                    <a class="has-text-link-light"
                                       href="{{ MEDIA_URL }}{{ resources.file }}">
                                        {{ resources.name }}
                                    </a>
                                </span>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    {% endif %}
    {# 评论 #}
{% endblock %}

